<template>
  <div>
    <van-nav-bar title="购物车" />
    <!-- 商品 -->
    <div class="carshop" v-for="item in carlist" :key="item.id">
      <van-checkbox
        v-model="item.isDirect"
        checked-color="#ee0a24"
        class="carcheck"
        @click="dx"
      ></van-checkbox>

      <div class="carimg">
        <img :src="item.img" alt="" />
      </div>
      <div class="cargoods">
        <div class="carjs">{{ item.name }}</div>
        <div class="carjg">
          <div class="jg">￥{{ item.price }}</div>

          <div class="sl">
            <span
              class="minute"
              @click="item.num > 1 ? (sub = item.num--) : (sub = item.num)"
              >-</span
            >
            <input class="input" v-model="item.num" @keyup="setnum(item.num)" />
            <span class="add" @click="add = item.num++">+</span>
          </div>
        </div>
      </div>
    </div>
    <!-- 商品结束 -->
    <div class="js">
      <van-submit-bar :price="sumPrice" button-text="去结算" @submit="onSubmit">
        <van-checkbox v-model="isAll" checked-color="#ee0a24">{{
          isAll ? "取消全选" : "全选"
        }}</van-checkbox>
      </van-submit-bar>
    </div>

    <LayoutView></LayoutView>
  </div>
</template>

<script>
import LayoutView from "@/views/layout/LayoutView.vue";
export default {
  components: {
    LayoutView,
  },
  data() {
    return {
      checked: false,
      carlist: [],
      num: 1, //定义默认1
    };
  },
  created() {
    this.carlist = JSON.parse(localStorage.getItem("carlist") || "[]");
    console.log(this.$store.state.carlistgood);
  },
  watch: {
    carlist: {
      deep: true,
      handler(val) {
        localStorage.setItem("carlist", JSON.stringify(val));
      },
    },
  },

  methods: {
    onSubmit() {
      console.log("提交了");
    },
    dx() {
      console.log("单选");
    },
  },

  computed: {
    isAll: {
      set(val) {
        // 通过判断set 传入v-model的值 判断是否选中 如果是 把所有的都遍历 并且把set传入的值赋值
        return this.carlist.forEach((item) => (item.isDirect = val));
      },
      get() {
        //通过every 语法来判断是不是选中状态 如果是就全选 如果不是就返回false v-modle就会接收到值
        return this.carlist.every((item) => item.isDirect === true);
      },
    },
    sumPrice() {
      //先进行数组筛选 把选中的筛选出来放在一一个新数组 然后再对这个 数据
      //判断当前购物车有没有数据

      let newarr = this.carlist.filter(function (val) {
        return val.isDirect == true;
      });
      let sumPrice = 0;
      for (let i = 0; i < newarr.length; i++) {
        sumPrice += parseInt(newarr[i].price) * newarr[i].num * 100; //这个组件的单位小 所以乘以100
      }
      return sumPrice;

      // this.carlist.filter()
      //   // //用一个变量准备接住计算后的值
      //   // let sumPrice = 0;
      //   // for (let i in this.carlist) {
      //   //   //总价为每个商品的价格(price)*数量(num)
      //   //   sumPrice += this.carlist[i].price * this.productList[i].num;
      //   // }
      //   // //最后return出去计算好的值,直接用就好了,不用在data中起总价的变量,不然会报错
    },
  },
};
</script>

<style lang="less" scoped>
/deep/.van-checkbox__icon {
  font-size: 1.25rem;
}
.sl span {
  font-size: 1.25rem;
}
.input {
  background-color: #eee;
  outline: none;
  border: none;
  width: 2rem;
  text-align: center;
  margin: 0 1rem;
}
.carshop {
  display: flex;
  background-color: #fff;
  margin-top: 0.2rem;
}
.carcheck {
  flex: 10%;
  text-align: center;
  padding-left: 1rem;
}

.carimg {
  flex: 30%;
  height: 7rem;
}
.carimg img {
  width: 100%;
  height: 100%;
}
.cargoods {
  flex: 60%;
  display: flex;
  flex-direction: column;
  padding: 0.5rem;
}
.carjs {
  flex: 70%;
}
.carjg {
  flex: 30%;
  display: flex;
  justify-content: space-between;
}
.jg {
  color: red;
  font-size: 1.25rem;
}

.js {
  margin-bottom: 100px;
}
/deep/.van-submit-bar__bar {
  font-size: 1rem;
  height: 3rem;
}
/deep/.van-submit-bar__button {
  height: 2rem;
  width: 5rem;
  font-size: 1rem;
}
/deep/.van-checkbox__icon {
  height: 2rem;
}
/deep/.van-icon {
  height: 1.25rem;
  width: 1.25rem;
}
/deep/.van-checkbox__icon {
  height: 1.25rem;
}
/deep/.van-submit-bar__price--integer {
  font-size: 1rem;
}
/deep/.van-submit-bar__price {
  font-size: 1.25rem;
}

.van-submit-bar {
  margin-bottom: 250px;
}
/deep/.van-nav-bar__content {
  height: 3rem;
}
/deep/.van-nav-bar__title {
  font-size: 1rem;
  line-height: 1rem;
}
</style>
